<template>
    <div class="money-detail-content">
        <div class="money-detail-title">
            <img src="../../assets/img/back.png" alt="" @click="backRoute()">
            资金明细
        </div>
        <div class="money-detail-logo">
            <img src="../../assets/img/logo.png" alt="">
        </div>
        <div class="money-detail-banner">
            <div>我的资产</div>
            <div class="num">0.0TRX</div>
            <div>≈0.0元</div>
        </div>
        <div class="money-detail-month">
            <ul class="months">
                <li class="month" :class="elevenShow ? 'active' : ''" @click="elevenShow = true, twelveShow = false, oneShow = false">11月</li>
                <li class="month" :class="twelveShow ? 'active' : ''" @click="twelveShow = true, elevenShow = false, oneShow = false">12月</li>
                <li class="month" :class="oneShow ? 'active' : ''" @click="oneShow = true, elevenShow = false, twelveShow = false">1月</li>
                <li class="month disable">2月</li>
                <li class="month disable">3月</li>
                <li class="month disable">4月</li>
            </ul>
        </div>
        <div>
            <ul class="money-detail-list" v-if="oneShow">
                <li class="item">
                    <div class="left">
                        <div class="type">注册赠送</div>
                        <div class="time">2019-01-22 14:13:00</div>
                    </div>
                    <div class="right">
                        <div class="num active">+888TRX</div>
                        <div class="note">注册赠送</div>
                    </div>
                </li>
            </ul>
            <div class="no-data" v-if="elevenShow | twelveShow">当前月没有账单明细数据~</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'money-detail',
        data() {
            return{
                elevenShow: false,
                twelveShow: false,
                oneShow: true
            }
        }
    }
</script>

<style lang="scss">
    .money-detail-content{
        width: 100%;
        height: 100%;
        background-color: rgb(247, 247, 247);
        ul ,li{
            list-style: none;
        }
        .money-detail-title{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            font-size: 0.34rem;
            border-bottom: 0.02rem solid #ccc;
            background-color: #fefefe;
            position: relative;
            img{
                width: 0.36rem;
                position: absolute;
                left: 0.2rem;
                top: 0.32rem;
            }
        }
        .money-detail-logo{
            background: #fff;
            padding: 0.3rem 0.3rem 0.16rem;
            height: 0.9rem;
            img{
                width: 1.25rem;
                height: 0.38rem;
                vertical-align: top;
            }
        }
        .money-detail-banner{
            height: 3.05rem;
            background: url(../../assets/img/red-bg.png) 0 0 no-repeat;
            background-size: 100% auto;
            text-align: center;
            color: #fff;
            font-size: 0.24rem;
            padding-top: 0.68rem;
            position: relative;
            .num{
                font-size: 0.72rem;
                line-height: 1.2rem;
            }
        }
        .money-detail-month{
            height: 0.96rem;
            line-height: 0.96rem;
            font-size: 0.32rem;
            color: #666;
            background-color: #fff;
            border-bottom: 0.01rem solid #eee;
            font-weight: 700;
            .months{
                display: flex;
                .month{
                    width: calc(100% / 6);
                    text-align: center;
                    position: relative;
                }
                .active{
                    color: #e60816;
                }
                .active:after{
                    display: block;
                    content: "";
                    height: 0;
                    width: 0.24rem;
                    border: 0.02rem solid #e60816;
                    border-radius: 0.02rem;
                    position: absolute;
                    bottom: 0.18rem;
                    left: 50%;
                    transform: translateX(-0.12rem);
                }
                .disable{
                    color: #ccc;
                }
            }
        }
        .money-detail-list{
            background-color: #fff;
            .item{
                display: flex;
                height: 1.28rem;
                border-bottom: 0.02rem solid #eee;
                padding: 0.3rem 0.32rem;
                .left{
                    width: 50%;
                    .type{
                        font-size: 0.28rem;
                        color: #333;
                    }
                    .time{
                        color: #999;
                        font-size: 0.24rem;
                    }
                }
                .right{
                    width: 50%;
                    text-align: right;
                    .num{
                        font-size: 0.28rem;
                        color: #333;
                    }
                    .active{
                        color: #e60816;
                    }
                    .note{
                        color: #999;
                        font-size: 0.24rem;
                    }
                }
            }
        }
        .no-data{
            font-size: 0.28rem;
            color: #333;
            text-align: center;
            line-height: 0.8rem;
            padding-top: 45%;
        }
    }
</style>
